<template>
  <a-layout>
    <a-layout-header >
      <a-input-search placeholder="input search text"  />
    </a-layout-header>
    <a-layout  id="components-layout-demo-fixed-sider">
      <a-layout-sider :style="menuStyle">
        <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['4']">
          <a-menu-item key="1">
            <a-icon type="user" />
            <span class="nav-text">nav 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="video-camera" />
            <span class="nav-text">nav 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="upload" />
            <span class="nav-text">nav 3</span>
          </a-menu-item>
          <a-menu-item key="4">
            <a-icon type="bar-chart" />
            <span class="nav-text">nav 4</span>
          </a-menu-item>
          <a-menu-item key="5">
            <a-icon type="cloud-o" />
            <span class="nav-text">nav 5</span>
          </a-menu-item>
          <a-menu-item key="6">
            <a-icon type="appstore-o" />
            <span class="nav-text">nav 6</span>
          </a-menu-item>
          <a-menu-item key="7">
            <a-icon type="team" />
            <span class="nav-text">nav 7</span>
          </a-menu-item>
          <a-menu-item key="8">
            <a-icon type="shop" />
            <span class="nav-text">nav 8</span>
          </a-menu-item>
          <a-menu-item key="9">
            <a-icon type="appstore-o" />
            <span class="nav-text">nav 6</span>
          </a-menu-item>
          <a-menu-item key="10">
            <a-icon type="team" />
            <span class="nav-text">nav 7</span>
          </a-menu-item>
          <a-menu-item key="11">
            <a-icon type="shop" />
            <span class="nav-text">nav 8</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout :style="">
        <a-layout-content :style="layoutContentStyle">
          <div :style="{ background: '#fff', textAlign: 'center' }">
            ...
            <br />
            Really
            <br />...<br />...<br />...<br />
            long
            <br />...<br />...<br />...<br />...<br />...<br />...
            content
            ...
            <br />
            Really
            <br />...<br />...<br />...<br />
            long
            <br />...<br />...<br />...<br />...<br />...<br />...
            content
            ...
            <br />
            Really
            <br />...<br />...<br />...<br />
            long
            <br />...<br />...<br />...<br />...<br />...<br />...
            content

          </div>

        </a-layout-content>
        <!--<a-layout-footer :style="layoutContentStyle">-->
          <!--Ant Design ©2018 Created by Ant UED-->
        <!--</a-layout-footer>-->
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
    export default {
        name: "category",
        data(){
          return {
            menuStyle:{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0,width: '6em',maxWidth: '6em',minWidth:'6em' },
            layoutContentStyle:{marginTop: '0em',  marginBottom: '0em', marginLeft: '6em'},
          }
        }
    }
</script>

<style scoped>
  #components-layout-demo-fixed-sider .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }

  .ant-layout-header{
    height: 2em;
    background-color: lavender;
    padding: 0em 0em;
    line-height: 0em;
  }
  .ant-layout-sider{
    background-color: lavender;
  }
  .ant-menu{
    background-color: lavender;
  }

  .ant-input-search .ant-input{
    width: 90%;
    height: 1.5em;
  }


</style>
